<template>
	<div>
		<div class="banner">
			<image src="https://www.baixuemianshi.com/zhuanti/images/banner_skzwpp.jpg" mode="widthFix"></image>
			<div class="year">2021</div>
		</div>
		<div class="container">
			<div class="searchBox">
				<u-subsection :list="tabList" :current="curNow" @change="sectionChange" activeColor="#f56c6c"></u-subsection>

				<div class="zpxq" v-if="curNow == 0">
					<u-cell-group>
						<u-cell icon="map" :title="selectCity" @click="p_city = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="list-dot" :title="selectXt" @click="p_xt = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="grid" :title="selectBm" @click="p_bm = true" :isLink="true"
							arrow-direction="right"></u-cell>
					</u-cell-group>
					<u-picker :show="p_city" :columns="cityList" @confirm="changeCity" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="p_xt" :columns="xtList" @confirm="changeXt" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="p_bm" :columns="bmList" @confirm="changeBm" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
				</div>
				<div class="gwdm" v-else>
					<u-cell-group>
						<u-cell icon="map" :title="personSearch.selectCity" @click="personSearch.p_city = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="list-dot" :title="personSearch.selectXt" @click="personSearch.p_xt = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="bookmark" :title="personSearch.selectXl" @click="personSearch.p_xl = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="info-circle" :title="personSearch.selectGzjl" @click="personSearch.p_gzjl = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="coupon" :title="personSearch.selectZzmm" @click="personSearch.p_zzmm = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="setting" :title="personSearch.selectZkdx" @click="personSearch.p_zkdx = true" :isLink="true"
							arrow-direction="right"></u-cell>
					</u-cell-group>
					<u-picker :show="personSearch.p_city" :columns="personSearch.cityList" @confirm="p_changeCity" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_xt" :columns="personSearch.xtList" @confirm="p_changeXt" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_xl" :columns="personSearch.xlList" @confirm="p_changeXl" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_gzjl" :columns="personSearch.gzjlList" @confirm="p_changeGzjl" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_zzmm" :columns="personSearch.zzmmList" @confirm="p_changeZzmm" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_zkdx" :columns="personSearch.zkdxList" @confirm="p_changeZkdx" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<p class="warningText">* 以上条件非必填项</p>
					
				</div>
				<u-button type="warning" text="立即查询" @click="search" color="#f56c6c" :customStyle="buttonStyle">
				</u-button>
			</div>
		</div>
		<div class="resultBox" v-if="showResult">
			<div class="container" v-if="dataList.length > 0">
				<h4>为您扫描到<i>{{ dataList.length }}</i>个岗位</h4>
				<ul class="pagination" v-if="maxPage > 1">
					<li @click="selectPage(1)">首页</li>
					<li @click="prevPage">上一页</li>
					<li><span>{{page}}/{{maxPage}}</span></li>
					<li @click="nextPage">下一页</li>
					<li @click="selectPage(maxPage)">尾页</li>
				</ul>
				<div class="items">
					<div class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail('2021',item.wyz)" v-if="index < (8 * page) && index >= (8 * page) - 8">
						<h3>{{ item.bmmc }}</h3>
						<p><span>招录人数</span> {{ item.zkrs }}</p>
						<p><span>缴费人数</span> <i>{{ item.jfrs }}</i></p>
						<p><span>职位代码</span> {{ item.zwdm }}</p>
						<p><span>职位名称</span> {{ item.zwmc }}</p>
						<div class="btnBox">
							<u-button type="success" shape="circle" size="mini" text="收藏职位+"
								@click.native.stop="addFav(item.wyz)" v-if="!favzw.includes('2021-' + item.wyz)"></u-button>
							<u-button type="success" shape="circle" size="mini" text="取消收藏-"
								@click.native.stop="removeFav(item.wyz)" v-else :plain="true"></u-button>
						</div>
					</div>
				</div>
				<ul class="pagination" v-if="maxPage > 1">
					<li @click="selectPage(1)">首页</li>
					<li @click="prevPage">上一页</li>
					<li><span>第{{page}}页/共{{maxPage}}页</span></li>
					<li @click="nextPage">下一页</li>
					<li @click="selectPage(maxPage)">尾页</li>
				</ul>
			</div>
			<div class="container errorBox" v-else>
				<u--text type="error" align="center"  text="未检索到职位信息"></u--text>
				<u--text type="error" align="center"   text="请修改条件后重新检索"></u--text>
			</div>
		</div>

		<!-- <div class="addFriend">
			<div class="container">
				<image :src="userInfo.ewm" show-menu-by-longpress="true" mode="widthFix"></image>
			</div>
		</div> -->
		
		<div class="container">
			<div class="other">
				<ul>
					<li @click="changePath('./index')"> <image src="http://www.baixuemianshi.com/zhuanti/images/zwpp_03.png" mode="widthFix"></image> </li>
					<li @click="changePath('./index_2021')"> <image src="http://www.baixuemianshi.com/zhuanti/images/zwpp_02.png" mode="widthFix"></image> </li>
				</ul>
			</div>
		</div>
		<div v-if="favzw.length > 0">
			<u-gap height="60" bgColor="#fff"></u-gap>
		</div>
		
		<div class="fixBottom" v-if="favzw.length > 0">
			<u-button type="success" text="查看收藏职位" size="small" icon="eye" @click="changePath('../favzw/index')"></u-button>
		</div>
		
		
		<u-modal
			:show="showLogin" 
			title="体验次数已用尽,请输入口令码" 
			:cancelText="'暂不登录'" 
			:showCancelButton="false"
			:showConfirmButton="false" 
			>
			<view class="slot-confirmButton">
				<div class="modalBtns">
					<div>
						<u--input
						    placeholder="请输入口令码"
						    border="surround"
						    v-model="klcode"
						  ></u--input>
					</div>
					<u-button type="error" text="确定" @click="checkKlm"></u-button>
					<div class="ewmBox">
						<image :src="userInfo.ewm"show-menu-by-longpress="true" mode="widthFix"></image>
						<p>长按识别二维码<br>添加助教微信领取口令码</p>
					</div>
				</div>
				
			</view>
		</u-modal>
		
		<share></share>
		<u-toast ref="uToast"></u-toast>

		<div class="name">{{name}}</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import share from '../../common/share/index.vue';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				klcode: "",
				name: '',
				searchNum: 0,
				tabList: ["按职位信息查询", "按个人信息查询"],
				searchLink: "https://www.baixuemianshi.com/zhuanti/sk-tools/zwb2021.js",
				curNow: 0,
				p_city: false,
				selectCity: '请选择地市',
				cityList: [
					[]
				],
				p_xt: false,
				selectXt: '请选择系统',
				xtList: [
					[]
				],
				p_bm: false,
				selectBm: '请选择单位名称',
				bmList: [
					[]
				],
				allZw: [],
				
				personSearch:{
					p_city: false,
					selectCity: '请选择地市',
					cityList: [
						[]
					],
					p_xt: false,
					selectXt: '请选择招考系统',
					xtList: [
						[]
					],
					p_xl: false,
					selectXl: '请选择学历',
					xlList: [
						[]
					],
					p_zkdx: false,
					selectZkdx: '请选择招考对象',
					zkdxList: [
						[]
					],
					p_gzjl: false,
					selectGzjl: '请选择工作经历',
					gzjlList: [
						[]
					],
					p_zzmm: false,
					selectZzmm: '请选择政治面貌',
					zzmmList: [
						[]
					],
				},
				
				dataList: [],
				buttonStyle: {
					width: '100%',
					margin: '20rpx 0 0 0'
				},
				bmdmVal: '',
				scrollTop: 0,
				userInfo: {
					name: "娄宇",
					ewm: "http://hlj.offcn.com/zg/lynn/img/d1.png"
				},
				sort: ['省直', '哈尔滨', '齐齐哈尔', '牡丹江', '佳木斯', '大庆', '绥化', '鸡西', '伊春', '双鸭山', '黑河', '鹤岗', '七台河', '大兴安岭'],
				zwCompare: [],
				zwCompareDetail: [],
				showCompare: false,
				showComList: false,
				comList: [],
				style2:{
					width: "49%"
				},
				style3:{
					width: "45%"
				},
				showLogin: false,
				showResult: false,
				
				
				page: 1,
				maxPage: '',
			};
		},
		onShareAppMessage(options) {
			let shareObj = {
			    title: "省考-职位匹配",
			    path: '/pages/sk-tools/zwpp/index_2021?name=' + this.name,
			    imageUrl: ''   
			};
			return shareObj
		},
		onShareTimeline(res) {
			let that = this;
			return {
				title: '省考-职位匹配',
				query: "name=" + that.name
			};
		},
		onShow() {},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			let that = this;
			that.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			if (!options) {} else {
				this.name = options.name
			}
		},
		computed: {
			searchtimes() {
				return this.$store.getters.searchtimes ? this.$store.getters.searchtimes : '';
			},
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			useropenid() {
				return this.$store.getters.useropenid ? this.$store.getters.useropenid : '';
			},
			username() {
				return this.$store.getters.username ? this.$store.getters.username : '';
			},
			loginpage() {
				return this.$store.getters.loginpage ? this.$store.getters.loginpage : '';
			},
			favzw() {
				return this.$store.getters.favzw ? this.$store.getters.favzw : '';
			}
		},
		mounted() {
			if (this.searchtimes > 0) {
				this.searchNum = this.searchtimes
			}
			this.name = this.name ? this.name : this.username;
			this.LogSetName(this.name);
			this.getewm()
			let hLogin = wx.getStorageSync("sk_bl_hasLogin");
			if(hLogin){
				this.sk_bl_hasLogin = true
			}
		},
		watch: {
			userphone(val){
				if (this.userphone) {
					if(!this.loginpage.includes('sk-zwpp')){
						this.singleRegister()
					}
					
				}
			}
		},
		created() {
			let that = this;
			that.getAllZw()
		},
		methods: {
			...mapActions(['LogSetSearchtimes','LogSetPhone','LogSetOpenid','LogSetName','LogSetPage','LogSetFavzw']),
			getopenid() {
				let that = this;
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid = res.result.openid
					}
				});
			},
			getewm(){
				let that = this
				db.collection("bxms_ewm").where({
				    name: that.name
				}).get({
					success: function(res){
						that.userInfo.ewm = res.data[0].ewm1
						that.userInfo.name = that.name
						
						db.collection('23gkbl_zwsc_user').add({
							data: {
								openid: openid,
								name: that.name,
								time: new Date()
							},
							success: function(res) {
								console.log('储存成功');
							}
						});
						
					},
					fail: function(req){
						console.log(req)
					}
				})
			},
			checkKlm(){
				let that = this
				wx.cloud.callFunction({
					name: 'get_klm',
					data: {},
					complete: res => {
						console.log('callFunction result: ', res)
						if(res.result.klm == that.klcode){
							that.sk_bl_hasLogin = true
							that.showLogin = false
							wx.setStorageSync('sk_bl_hasLogin', true);
						}else{
							console.log("口令码不正确")
							uni.showToast({
								icon: "error",
								title: '口令码不正确'
							});
							that.showLogin = true
						}
					}
				})
			},
			sectionChange(index) {
				this.curNow = index;
			},

			changeCity(e) {
				let that = this
				that.selectCity = e.value[0]
				that.p_city = false
				that.getBmList()
			},
			changeXt(e) {
				let that = this
				that.selectXt = e.value[0]
				that.p_xt = false
				that.getBmList()

			},
			changeBm(e) {
				let that = this
				that.selectBm = e.value[0]
				that.p_bm = false
			},
			closePicker() {
				this.p_xt = false
				this.p_city = false
				this.p_bm = false
				this.showComList = false
				this.showLogin = false
				
				this.personSearch.p_city = false
				this.personSearch.p_gzjl = false
				this.personSearch.p_zkdx = false
				this.personSearch.p_zzmm = false
				this.personSearch.p_xt = false
				this.personSearch.p_xl = false
			},
			getAllZw() {
				let that = this
				uni.request({
					url: that.searchLink,
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.getCity(resjson)
						that.getPersonList(resjson)
					}
				});
			},
			getPersonList(allZw){
				let that = this
				let city = [],
					xl = [],
					xt = [],
					zzmm = [],
					zkdx = [],
					gzjl = [];
				allZw.map((item, index) => {
					city.push(item.city)
					xl.push(item.xl)
					xt.push(item.xt)
					zzmm.push(item.zzmm)
					zkdx.push(item.zkdx)
					gzjl.push(item.gzjl)
				})
				city = [...new Set(city)]
				xt = [...new Set(xt)]
				xl = [...new Set(xl)]
				zzmm = [...new Set(zzmm)]
				zkdx = [...new Set(zkdx)]
				gzjl = [...new Set(gzjl)]
				
				city.sort((star, next) => {
					return that.sort.indexOf(star) - that.sort.indexOf(next);
				});
				
				that.personSearch.cityList[0] = city
				that.personSearch.xtList[0] = xt
				that.personSearch.xlList[0] = xl
				that.personSearch.zzmmList[0] = zzmm
				that.personSearch.gzjlList[0] = gzjl
				that.personSearch.zkdxList[0] = zkdx
				
			},
			getCity(allZw) {
				let that = this
				let citys = []
				let xts = []
				allZw.map((item, index) => {
					citys.push(item.city)
					xts.push(item.xt)
				})
				citys = [...new Set(citys)]
				xts = [...new Set(xts)]
				citys.sort((star, next) => {
					return that.sort.indexOf(star) - that.sort.indexOf(next);
				});
				that.cityList[0] = citys
				that.xtList[0] = xts
			},
			getBmList() {
				let that = this
				
				if (that.selectXt == '请选择系统') {
					console.log('未选择系统')
					return 
				}
				if (that.selectCity == '请选择地市') {
					console.log('未选择地市')
					return 
				}
				that.selectBm = "请选择单位名称"

				uni.request({
					url: that.searchLink,
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						let a1 = resjson.filter(item => item.city == that.selectCity && item.xt == that
							.selectXt)
						a1 = a1.map(item => item.bmmc)
						a1 = [...new Set(a1)]
						that.bmList[0] = a1
					}
				});
			},
			p_changeCity(e) {
				let that = this
				that.personSearch.selectCity = e.value[0]
				that.closePicker()
			},
			p_changeXl(e) {
				let that = this
				that.personSearch.selectXl = e.value[0]
				that.closePicker()
			},
			p_changeXt(e) {
				let that = this
				that.personSearch.selectXt = e.value[0]
				that.closePicker()
			},
			p_changeGzjl(e) {
				let that = this
				that.personSearch.selectGzjl = e.value[0]
				that.closePicker()
			},
			p_changeZzmm(e) {
				let that = this
				that.personSearch.selectZzmm = e.value[0]
				that.closePicker()
			},
			p_changeZkdx(e) {
				let that = this
				that.personSearch.selectZkdx = e.value[0]
				that.closePicker()
			},
			search() {
				let that = this
				if(that.searchNum >= 3 && !that.sk_bl_hasLogin){
					that.showLogin = true
					return 
				}
				if (that.curNow == 1) {
					that.searchPerson()
					return
				}
				if(that.selectCity == "请选择地市"){
					that.showToast('error','请选择地市')
					return
				}
				if(that.selectXt == "请选择系统"){
					that.showToast('error','请选择系统')
					return
				}
				if(that.selectBm == "请选择单位名称"){
					that.showToast('error','请选择单位')
					return
				}
				that.showToast('loading','正在加载')
				uni.request({
					url: that.searchLink,
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						let a1 = resjson.filter(item => item.city == that.selectCity && item.xt == that
							.selectXt && item.bmmc == that.selectBm)
						that.dataList = a1
						that.maxPage = Math.ceil(that.dataList.length / 8);
						that.showResult = true
						if(!that.userphone){
							that.searchNum += 1
							that.LogSetSearchtimes(that.searchNum);
						}
					}
				});
			},
			searchPerson() {
				let that = this
				
				uni.request({
					url: that.searchLink,
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.filterZw(resjson)
						
					}
				});
			},
			filterZw(zw){
				let that = this
				that.showToast('loading','正在加载')
				let p = that.personSearch
				let a1 = zw
				if(p.selectCity != "请选择地市"){
					a1 = a1.filter(item => item.city == that.personSearch.selectCity)
				}
				if(p.selectXl != "请选择学历"){
					a1 = a1.filter(item => item.xl == that.personSearch.selectXl)
				}
				if(p.selectXt != "请选择招考系统"){
					a1 = a1.filter(item => item.xt == that.personSearch.selectXt)
				}
				if(p.selectZzmm != "请选择政治面貌"){
					a1 = a1.filter(item => item.zzmm == that.personSearch.selectZzmm)
				}
				if(p.selectGzjl != "请选择工作经历"){
					a1 = a1.filter(item => item.gzjl == that.personSearch.selectGzjl)
				}
				if(p.selectZkdx != "请选择招考对象"){
					a1 = a1.filter(item => item.zkdx == that.personSearch.selectZkdx)
				}
				
				that.dataList = a1
				that.maxPage = Math.ceil(that.dataList.length / 8);
				that.showResult = true
				if(!that.userphone){
					that.searchNum += 1
					that.LogSetSearchtimes(that.searchNum);
				}
			},
			showToast(type, info) {
				this.$refs.uToast.show({
					type: type,
					icon: false,
					title: '失败主题',
					message: info,
				})
			},
			addFav(wyz) {
				let that = this
				if(that.favzw.length >= 10){
					that.showToast('error','最多收藏10个职位！')
					return
				}
				let zwinfo = '2021-' + wyz
				let allFav = that.favzw
				if (!allFav.includes(zwinfo)) {
					allFav.push(zwinfo)
					that.LogSetFavzw(allFav)
				}
			},
			removeFav(wyz) {
				let that = this
				let zwinfo = '2021-' + wyz
				let allFav = that.favzw
				if (allFav.includes(zwinfo)) {
					allFav = allFav.filter(item => item != zwinfo)
					that.LogSetFavzw(allFav)
				}
			},
			imgView(imgUrl) {
				wx.previewImage({
					urls: [imgUrl], //需要预览的图片http链接列表，注意是数组
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			prevPage() {
				if (this.page == 1) return;
				this.page--;
			},
			// 下一页
			nextPage() {
				if (this.page == this.maxPage) return;
				this.page++;
			},
			selectPage(index) {
				this.page = index
			},
			showDetail(year,wyz){
				uni.navigateTo({
					url: '../zwxq/index?year=' + year + '&wyz=' + wyz
				})
			},
			cYear(year){
				let that = this
			},
			changePath(path){
				uni.navigateTo({
					url: path
				})
			}
		},
		components: {share}
	};
</script>

<style lang="scss">
	@import url(./index.css);
</style>
